<template>
	<view class="f24r col363636">
		<view class="pt10r pb10r pl20r pr20r borB1SE8e8e8 backColWhite">
			<view class="borB1SE6e6e6 h70r pb10r aliItCenter disFlex">
				<view class="w220r">
					服务开始时间：
				</view>
				<view class="flex1 col292929">
					<picker mode="date" :value="data0Date1" :start="startDate" :end="data0Date2"
						@change="data0bindDateChange1"
					>
						<view class="wPer95 h60r lh60r borRad30r bor1SE8e8e8 teAliCenter">
							{{data0Date1}}
						</view>
					</picker>
				</view>
				<view class="col585858 w40r teAliCenter">
					~
				</view>
				<view class="flex1 col292929">
					<picker mode="date" :value="data0Date2" :start="data0Date1" :end="endDate"
						@change="data0bindDateChange2"
					>
						<view class="wPer95 h60r lh60r borRad30r bor1SE8e8e8 teAliCenter">
							{{data0Date2}}
						</view>
					</picker>
				</view>
			</view>
			<view class="borB1SE6e6e6 h70r pb10r aliItCenter disFlex pt10r">
				<view class="w150r">
					付款状态：
				</view>
				<view class="flex1 borR1SE5e5e5">
					<picker @change="picChaFun1" :value="picVal1" :range="picRang1" mode="selector"
						range-key="name" class=""
					>
						<view class="wPer80 h60r lh60r borRad30r bor1SE8e8e8 teAliCenter">
							{{picRang1 && picRang1.length ? picRang1[picVal1].name : ''}}
						</view>
					</picker>
				</view>
				<view class="w150r teAliRight">
					订单状态：
				</view>
				<view class="flex1">
					<picker @change="picChaFun2" :value="picVal2" :range="picRang2"
						mode="selector" range-key="name"
					>
						<view class="wPer80 h60r lh60r borRad30r bor1SE8e8e8 teAliCenter">
							{{picRang2 && picRang2.length ? picRang2[picVal2].name : ''}}
						</view>
					</picker>
				</view>
			</view>
			<view class="borB1SE6e6e6 h70r pb10r aliItCenter disFlex pt10r">
				<view class="w150r">
					用户手机号：
				</view>
				<view class="flex1 borR1SE5e5e5 pr20r">
					<input type="number" v-model="searchPhone"
						class="f24r col363636 lh60r h60r bor1SE8e8e8 pl20r pr20r borRad35r"
						placeholder="搜索用户手机号"
					>
				</view>
				<view class="w130r teAliRight">
					房间id：
				</view>
				<view class="w170r">
					<input type="number" v-model="searchRid"
						class="f24r col363636 lh60r h60r bor1SE8e8e8 pl20r pr20r borRad35r"
						placeholder="搜索房间id"
					>
				</view>
			</view>
			<view class="h70r aliItCenter disFlex pt10r">
				<view class="flex1 teAliCenter">
					<view class="backRgba103a194a58a1 bor1SRgba103a194a58a2 col67c23a pl20r pr20r lh56r borRad8r disInBlo">
						实付金额合计：¥{{totalAmount ? totalAmount : '0.00'}}
					</view>
				</view>
				<view class="flex1 pt5r teAliCenter">
					<button class="w160r borRad10r lh60r colFff f26r disInBlo backCol409EFF"
						@click="cliScreening"
					>
						搜索
					</button>
				</view>
			</view>
		</view>
		<view class="pl20r pr20r">
			<view class="mt20r borRad10r bSha0010u0rgb00001 backImgLiGrTBDeedfdaFff overHid"
				v-for="item in data0List" :key="item.id" @click="cliOrderFun(item)"
			>
				<view class="disFlex aliItCenter h100r pl20r pr20r backImgLiGrTRE5e7fcaFff">
					<view class="flex1 f30r foWeiBold webLiCl1 webBoxOrVer overHid disWebBox">
						{{item.bname}}
					</view>
					<view :class="['w100r', 'teAliRight',
							item.type == 2 ? 'col00c260' : 'colC72d21'
						]"
					>
						{{
							item.type == 1 ? '未支付' :
							item.type == 2 ? '已支付' :
							item.type == 3 ? '已退款' :
							item.type == 4 ? '支付超时' : item.type
						}}
					</view>
				</view>
				<view class="p20r backColWhite">
					<view class="col999 disFlex">
						<view class="w150r">
							用户手机号：
						</view>
						<view class="flex1">
							{{item.phone ? item.phone : ''}}
						</view>
					</view>
					<view class="mt20r col999 disFlex">
						<view class="w150r">
							服务时间：
						</view>
						<view class="flex1">
							<view>
								开始：{{item.start_time}}
							</view>
							<view class="mt10r">
								结束：{{item.end_time}}
							</view>
						</view>
					</view>
					<view class="mt20r col999 disFlex">
						<view class="flex1">
							使用时长：{{item.hour}}小时
						</view>
						<view class="flex1">
							正常单/续单：{{
								item.order_status == 1 ? '正常单' :
								item.order_status == 2 ? '续单' : item.order_status
							}}
						</view>
					</view>
					<view class="mt20r col999 disFlex">
						<view class="flex1">
							付款方式：
							{{
								item.pay_type == 1 ? '余额支付' :
								item.pay_type == 2 ? '微信支付' : item.pay_type
							}}
						</view>
						<view class="flex1">
							订单状态：
							<text :class="item.make_status == 1 || item.make_status == 4 ? 'colC72d21' : 'col00c260'">
								{{
									item.make_status == 1 ? '待使用' :
									item.make_status == 2 ? '使用中' :
									item.make_status == 3 ? '已完成' :
									item.make_status == 4 ? '已取消' : item.make_status
								}}
							</text>
						</view>
					</view>
					<view class="mt20r disFlex">
						<view class="flex1 col999">
							实付金额：
							<text class="colFf3627">
								¥{{item.amount}}
							</text>
						</view>
						<view class="flex1 teAliRight colFff">
							<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox backCol409EFF borRad10r"
								v-if="item.is_release == 1"
								@click.stop="cliManualRelease(item.id, item.out_trade_no)"
							>
								手动释放
							</text>
							<text class="w140r lh50r disInBlo teAliCenter ml10r boSiBorBox backColA0cfff borRad10r"
								v-if="item.is_release == 2"
								@click.stop="cliReleasedBtn"
							>
								已释放
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="lh100r teAliCenter col999" v-if="data0More == true && data0List.length">
				已加载全部
			</view>
			<view class="col999 poAbs top50P left50P trTrn50Pn50P" v-if="data0List.length == 0">
				暂无数据
			</view>
		</view>
	</view>
</template>
<script>
import { inquiryToLogin, dateLimit } from '@/utils/utils.js'
import { teaGetOrderList, releaseOrder } from '@/utils/api.js'
export default {
	data() {
		return {
			token: '',
			data0List: [], data0More: false, data0Page: 0, totalAmount: '0.00',
			searchRid: '',
			data0Date1: '', data0Date2: '',
			picRang1: [
				{name: '全部', picType: ''},
				{name: '未支付', picType: 1}, {name: '已支付', picType: 2},
				{name: '已退款', picType: 3}, {name: '支付超时', picType: 4}
			], picVal1: 0, 
			picRang2: [
				{name: '全部', picType: ''},
				{name: '待使用', picType: 1}, {name: '使用中', picType: 2},
				{name: '已完成', picType: 3}, {name: '已取消', picType: 4}
			], picVal2: 0,
			searchPhone: '',
		}
	},
	computed: {
		startDate() {
			return dateLimit('oldYear1');
		},
		endDate() {
			return dateLimit('end');
		}
	},
	onLoad() {
		this.data0Date1 = dateLimit();
		this.data0Date2 = dateLimit();
		inquiryToLogin().then(res => {
			this.token = res;
			this.getDataList1(0);
		});
	},
	onPullDownRefresh() {
		this.data0More = false;
		this.data0Page = 0;
		this.getDataList1(0, () => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if(!this.data0More) {
			this.data0Page += 1;
			this.getDataList1(this.data0Page);
		}
	},
	methods: {
		getDataList1(page, callBack) {
			uni.showLoading({ title: '加载中...' })
			teaGetOrderList({
				token: this.token, number: 10,
				page, rid: this.searchRid,
				start_date: this.data0Date1,
				end_date: this.data0Date2,
				type: this.picRang1[this.picVal1].picType,
				make_status: this.picRang2[this.picVal2].picType,
				phone: this.searchPhone
			}).then(res => {
				this.totalAmount = res.data.amount;
				if(page > 0) {
					this.data0List = this.data0List.concat(res.data.data);
				}else {
					this.data0List = res.data.data;
				}
				console.log(11, this.data0List)
				// this.data0List.forEach(item => {
				// 	if((item.type == 2 && item.make_status == 1) || (item.type == 2 && item.make_status == 2) || (new Date(item.clear_end_time).getTime() >= new Date().getTime())) {
				// 		item.manualRelease = true;
				// 	}else {
				// 		item.manualRelease = false;
				// 	}
				// })
				if(res.data.number < 10) this.data0More = true;
				uni.hideLoading();
				if(callBack) callBack();
			})
		},
		cliOrderFun(item) {
			uni.navigateTo({
				url: '/pages/index/orderDetail?item=' + JSON.stringify(item)
			})
		},
		data0bindDateChange1(eee) {
			this.data0Date1 = eee.detail.value
		},
		data0bindDateChange2(eee) {
			this.data0Date2 = eee.detail.value;
		},
		picChaFun1(eee) {
			this.picVal1 = eee.detail.value
		},
		picChaFun2(eee) {
			this.picVal2 = eee.detail.value
		},
		cliScreening() {
			this.data0More = false;
			this.data0Page = 0;
			this.getDataList1(0);
		},
		cliManualRelease(id, out_trade_no) {
			uni.showModal({
				title: '提示', content: '确定手动释放？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						releaseOrder({
							token: this.token, id, out_trade_no
						}).then(res2 => {
							this.data0More = false;
							this.data0Page = 0;
							this.getDataList1(0);
							uni.showToast({
								title: '手动释放成功', duration: 3000
							})
						})
					}
				}
			})
		},
		cliReleasedBtn() {
			uni.showToast({
				title: '此房间已释放', duration: 3000, icon: 'none'
			})
		}
	}
}
</script>
<style>
</style>